<!--
  问答手风琴组件
  使用 Element Plus Collapse 展示常见问题和答案
-->
<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item
      v-for="(item, index) in questions"
      :key="index"
      :title="item.question"
      :name="index"
    >
      <div>{{ item.answer }}</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  props: {
    questions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeNames: []
    };
  }
};
</script>

<style scoped>
.el-collapse {
  background-color: #ffffff; /* 白色背景 */
  border: none;
}
.el-collapse-item__header {
  background-color: #ffffff; /* 白色背景 */
  color: #333; /* 深色文字 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.el-collapse-item__content {
  background-color: #ffffff; /* 白色背景 */
  color: #333; /* 深色文字 */
}
</style>